.swiper1 {
  position: relative;
  z-index: 0;
  overflow: hidden;

  img {
    height: 583px;
  }

  .swiper1-text {
    position: absolute;
    top: 28%;
    margin-left: 165px;
    text-align: left;
    background: none;

    h2 {
      font-size: 40px;
    }

    p {
      margin: 30px 0;
      margin-bottom: 45px;
      font-size: 16px;

      a {
        padding: 12px 48px;
        border: 1px solid white;
        color: white;
        text-shadow: none;

        &:hover {
          background-color: white;
          color: blue;
        }
      }
    }
  }
}

.swiper-pagination1 {
  bottom: 30px !important;
}

@media only screen and (max-width: 768px) {
  .swiper1 img {
    height: 291px;
  }

  .swiper1 .swiper1-text {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .swiper1 .swiper1-text p:nth-of-type(2) {
    display: none;
  }

  .swiper1 .swiper1-text h2 {
    margin-top: 0;
    font-size: 20px;
  }

  .swiper1 .swiper1-text p {
    font-size: 12px;
  }
}

.carousel-indicators {
  z-index: 1;
}

.quick-action {
  .img {
    width: 63px;
  }

  img {
    width: 80%;
    position: relative;
    top: 10px;
  }

  .col-sm-3 {
    a {
      display: inline-block;
      padding: 10px;
      padding-right: 20px;
      margin: 20px 0;
      border: 1px solid #f6f6f6;
      color: #666666;
    }
  }
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .quick-action {
    margin: 10px 0;
  }

  .quick-action .col-sm-3 a {
    width: 100%;
    margin: 0;
    margin-bottom: -7px;
  }
}

@media only screen and (max-width: 320px) {

  // 轮播图底部 快捷链接
  .quick-action {
    display: none;
  }
}

.products {
  padding: 40px 0;
  background-color: #F6F6F6;

  .container>p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 640px) {
  .products .container>h2 {
    font-size: 20px;
  }

  .products .container>p {
    font-size: 12px;
  }
}

.product {
  margin-top: 60px;
}

.products {
  .product {
    .product-item {
      float: left;
      width: 206px;
      height: 400px;
      background-color: #f8f8f8;
      border: 1px solid #ebebeb;
      text-align: center;

      ul {
        list-style: none;
        background-color: white;
        line-height: 3.6em;
        height: 254px;
        text-shadow: 1px 1px 1px darkgrey;

        li {
          a {
            line-height: 2em;
            color: #88c4ff;
            display: none;
            padding: 0 15px;
            border: 1px solid #88c4ff;
          }
        }
      }

      h3 {
        font-size: 18px;
        margin-bottom: 30px;
      }

      p {
        display: none;
      }

      &.active {
        width: 310px;
        height: 430px;
        padding: 10px;
        position: relative;
        top: -15px;
        background-color: #1976d2;

        h3 {
          text-align: center;
          font-size: 18px;
          color: white;
          margin-bottom: 10px;
        }

        p {
          display: block;
          text-align: left;
        }
      }
    }
  }

  .product-item {
    hr {
      display: none;
    }

    img {
      margin-top: 20px;
      height: 55px;
    }

    &.active {
      &>p {
        color: #88c4ff;
        font-size: 14px;
        padding: 10px;
      }

      hr {
        display: block;
        margin-bottom: 0;
        opacity: 0.4;
        border-color: #88c4ff;
        width: 107%;
        position: relative;
        left: -10px;
      }

      ul {
        text-align: left;
        width: 107%;
        margin-left: -10px;
        background-color: #1976d2;

        li {
          padding: 0 20px;
          color: white;

          a {
            line-height: 2em;
            color: #88c4ff;
            display: inline-block;
            margin-left: 117px;
            padding: 0 15px;
            border: 1px solid #88c4ff;
          }
        }
      }

      img {
        display: none;
      }
    }
  }
}

/*hover*/
.small-show {
  ul {
    border: 1px solid #ebebeb;
    background-color: white;

    a {
      li {
        padding: 20px 0;
        border-bottom: 1px solid #ebebeb;

        img {
          padding: 0 10px;
          height: 32px;
        }
      }
    }
  }
}

.solution {
  .hidden-xs {
    .wrapper {
      position: relative;
      width: 1180px;
      height: 425px;
      overflow: hidden;

      ul {
        width: 1770px;
        height: 425px;
        position: relative;
        transition: all 0.5s;

        li {
          width: 295px;
          height: 425px;
          float: right;

          &:nth-last-of-type(1) {
            background: url(../images/case-bg1.jpg) center center no-repeat;
            background-size: cover;
          }

          &:nth-last-of-type(2) {
            background: url(../images/case-bg2.jpg) center center no-repeat;
            background-size: cover;
          }

          &:nth-last-of-type(3) {
            background: url(../images/case-bg3.jpg) center center no-repeat;
            background-size: cover;
          }

          &:nth-last-of-type(4) {
            background: url(../images/case-bg4.jpg) center center no-repeat;
            background-size: cover;
          }

          &:nth-last-of-type(5) {
            background: url(../images/case-bg5.jpg) center center no-repeat;
            background-size: cover;
          }

          &:nth-last-of-type(6) {
            background: url(../images/case-bg6.jpg) center center no-repeat;
            background-size: cover;
          }

          &>div {
            text-align: center;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            transition: all 1s;

            &>img {
              width: 50px;
              margin-top: 138px;
              transition: all 0.5s;
            }

            &>h4 {
              margin: 30px 0;
            }

            &>.hover-show {
              display: none;

              p {
                text-align: justify;
                margin: 0 auto;
                width: 80%;
                font-size: 14px;
              }

              a {
                display: inline-block;
                margin-top: 20px;
                padding: 5px 25px;
                color: white;
                border: 1px solid white;
              }
            }

            &:hover {
              background-color: rgba(55, 143, 229, 0.8);

              .hover-show {
                display: block;
              }

              &>img {
                margin-top: 102px;
              }
            }
          }
        }
      }

      .fa {
        position: absolute;
        color: white;
      }

      .fa-angle-left {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }

      .fa-angle-right {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

/*hover*/
.swiper-slide {
  background-size: cover;

  &>div {
    text-align: center;
    padding: 50px 20px 38px 20px;
    color: white;
    background-color: rgba(130, 134, 159, 0.7);

    &>h4 {
      margin-top: 0;
    }

    &>div {
      p {
        text-align: left;
        color: #e8e5e6;
        margin-top: 20px;
      }

      a {
        display: inline-block;
        color: white;
        padding: 8px 35px;
        border: 1px solid white;
        margin-top: 30px;

        &:hover {
          background-color: white;
          color: #3879d9;
        }
      }
    }
  }
}

.slide1 {
  background: url(../images/case-bg1.jpg) center center no-repeat;
}

.slide2 {
  background: url(../images/case-bg2.jpg) center center no-repeat;
}

.slide3 {
  background: url(../images/case-bg3.jpg) center center no-repeat;
}

.slide4 {
  background: url(../images/case-bg4.jpg) center center no-repeat;
}

.slide5 {
  background: url(../images/case-bg5.jpg) center center no-repeat;
}

.slide6 {
  background: url(../images/case-bg6.jpg) center center no-repeat;
}

.swiper-pagination-bullet-active {
  background: white !important;
}

.news {
  background-color: #f6f6f6;
  padding-top: 40px;
  padding-bottom: 80px;

  .container {
    &>p {
      margin: 20px 0;
    }

    .col-sm-4 {
      img {
        height: 120px;
      }

      &>div {
        position: relative;
        margin: 30px 0;

        &>span {
          display: inline-block;
          background-color: rgba(25, 122, 216, 0.9);
          position: absolute;
          left: 0;
          top: -10px;
          width: 110px;
          height: 140px;
          text-align: center;
          color: white;
          font-size: 18px;
          line-height: 140px;
          white-space: pre-wrap;
        }
      }

      a {
        color: rgba(0, 0, 0, 0.8);

        &:hover {
          text-decoration: underline;
          color: black;
        }
      }

      p {
        padding-right: 2em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.touzi {
  text-align: center;
  line-height: 55px;
  padding-top: 40px;
  padding-bottom: 80px;

  h3 {
    font-size: 30px;
    margin-bottom: 0;
  }

  p {
    margin-bottom: 30px;
  }

  img {
    width: 100%;
  }
}

.point {
  text-align: center;
  padding: 30px 0;
  background: url(../images/point-bg.jpg) center center no-repeat;
  background-size: cover;
  color: white;
}

.case {
  padding-top: 30px;
  padding-bottom: 80px;

  h3 {
    text-align: center;
    font-size: 30px;
  }

  img {
    width: 100%;
  }

  .col-sm-2 {
    margin-top: 20px;
  }
}

.line {
  padding: 50px 0;
  text-align: center;
  background: url(../images/line-bg.jpg) center center no-repeat;
  background-size: cover;
  color: white;

  h3 {
    margin-top: 0;
    margin-bottom: 40px;
  }

  a {
    color: white;
    padding: 10px 35px;
    border: 1px solid white;

    &:hover {
      background-color: white;
      color: blue;
    }
  }
}